<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="260px">
        <div class="logo">
          <img src="@/assets/img/logo.jpg" alt="logo" />
          <p>数字人面试官</p>
        </div>
        <el-menu
          default-active="/data-overview"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
        >
          <el-menu-item-group title="主菜单"></el-menu-item-group>
          <el-menu-item index="/data-overview">
            <el-icon><Histogram /></el-icon>
            <span>数据概览</span>
          </el-menu-item>
          <el-menu-item index="/candidate-management">
            <el-icon><UserFilled /></el-icon>
            <span>候选人管理</span>
          </el-menu-item>
          <el-sub-menu index="/topic-classification-management">
            <template #title>
              <el-icon><QuestionFilled /></el-icon>
              <span>题库管理</span>
            </template>
            <el-menu-item index="/topic-classification-management">
              <el-icon><PriceTag /></el-icon>
              <span>题目分类管理</span>
            </el-menu-item>
            <el-menu-item index="/topics-management">
              <el-icon><Coin /></el-icon>
              <span>题目集管理</span>
            </el-menu-item>
            <el-menu-item index="/topic-management">
              <el-icon><Fold /></el-icon>
              <span>题目管理</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/interview-record">
            <el-icon><List /></el-icon>
            <span>面试记录</span>
          </el-menu-item>
          <el-menu-item index="/position-management">
            <el-icon><Briefcase /></el-icon>
            <span>职位管理</span>
          </el-menu-item>
          <el-menu-item index="/interviewer-management">
            <el-icon><Menu /></el-icon>
            <span>面试官管理</span>
          </el-menu-item>
          <el-menu-item-group title="系统"></el-menu-item-group>
          <el-menu-item index="/system-settings">
            <el-icon><Tools /></el-icon>
            <span>系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="avater">
            <img src="@/assets/logo.svg" alt="" />
          </div>
          <div class="info">
            <h3 class="name">张经理</h3>
            <p class="role">管理员</p>
          </div>
        </el-header>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.common-layout {
  height: 100vh;
  .el-aside {
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 100vh;
    .logo {
      padding: 16px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;
      img {
        width: 35px;
        height: 28px;
      }
      p {
        font-size: 18px;
        margin-left: 16px;
        color: #3498db;
      }
    }
  }
  .el-header {
    padding: 0 60px;
    display: flex;
    align-items: center;
    justify-content: end;
    .avater {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 16px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      .name {
        font-size: 14px;
      }
      .role {
        font-size: 12px;
        color: #6c757d;
      }
    }
  }
  .el-main {
    background: rgb(244, 244, 244);
  }
}
</style>
